I just solved a problem using "elementHandle.contentFrame()", but not really know what's going on behind it. So, I was trying to select a DOM element and click on it. But I realized that I couldn't just simply do it like this when the element is wrapped inside a frame:
{
await page.click('<element>');
}
So, I applied this method ("elementHandle.contentFrame()") and it works!
{
const handle = await page.$('frame');
const contentFrame = await handle.contentFrame();
await contentFrame.click('<selector>');
}
Can someone explain to me the concept behind it? Thanks!
You don't have to use contentFrame, page.frame('frame-name') can give you a frame instance as well.
Basically you can think iframe is a page inside another page, so that you have to first find that frame if you want select the element inside a iframe
The handle you have in the handle variable represents iframe element inside the page. With that variable, you can read or manipulate that element in the same way you can do with any other DOM element on that page. But you can't access the HTML content that iframe rendered.
That's why, if you want to interact with the content inside that frame you need to get the frame using contentFrame.